@charset "utf-8";

/* 计算rem */
@function r($px){
    @return ($px/40) * 1rem;
}
/* 减半px */
@function half($px){
    @return ($px/2) * 1px;
}

html,body{
    height: 100%;
    position: relative;
}
/* 头部 */
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(17) half(23) half(10);
    box-sizing: border-box;
    .logo{
        width: half(123);
        height: half(123);
        overflow: hidden;
        a{
            display: block;
            width: 100%;
            height: 100%;
        }
        img{
            width: 100%;
        }
    }
    .selectBar{
        margin-top: half(31);
        width: half(159);
        height: half(56);
        border: 1px solid #FF9344;
        background-image: url(../img/dsj.png);
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 15px 8px; 
        select{
            padding-left: 8px;
            -webkit-appearance: none;
            appearance: none;
            border: none;
            width: 100%;
            height: 100%;
            display: block;
            background: transparent;
        }
    }
}
/* 主体 */
section{
    position: absolute;
    top: half(150);
    bottom: half(135);
    width: r(750);
    overflow: scroll;//多余的部分用滚动显示
    -webkit-overflow-scrolling: touch;
    /* 图片轮播 */
    .pic_swiper{
        width: 100%;
        height: r(285);
        overflow-x: hidden;
        img{
            width: 100%;
            height: 100%;
        } 
    }
    /* 优惠团购 */
    .show_youhui{
        width: r(708);
        margin: half(33) auto;
        margin-bottom: 0;
        .lab{
            width: 100%;
            .lab_logo{
                width: half(56);
                height: half(54);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .lab_tip{
                padding-top: half(13);
                margin-left: half(9);
                font-size: 15px;
            }
            .lab_more{
                >a>span{
                    font-size: 12px;
                    color: #000000;
                    vertical-align: middle;
                }
                >a>img{
                     width: half(25);
                    height: half(26);   
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
        .pic{
            width: 100%;
            ul{
                padding: half(12) half(62);
                li{
                    width: 50%;
                    box-sizing: border-box;
                    padding: 5px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
    /* 猜你喜欢 */
    .show_like{
        width: r(718);
        margin: 0 auto;
        /* 上方标题 */
        .lab{
            width: 100%;
            .lab_logo{
                width: half(55);
                height: half(49);
                 img{
                    width: 100%;
                    height: 100%;
                }
            }
            .lab_tip{
                padding-top: half(11);
                margin-left: half(18);
                font-size: 15px;
            }
            .lab_more{       
                >a>span{
                    font-size: 12px;
                    color: #000000;
                    vertical-align: middle;
                }
                >a>img{
                    display: inline-block;
                    width: half(25);
                    height: half(26);
                    vertical-align: middle;
                }
            }
        }
        /* 下方图片文字描述 */
        .detail{
            width: 100%;
            .det_list1{
                 width: 100%;
                 margin-top: half(34);
                .leftL{
                    width: r(212);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .rightL{
                    width: r(483);
                    box-sizing: border-box;
                    padding: 6px 0 0 10px;
                    .detTop{
                        width: 100%;
                        >span{
                            display: inline-block;
                            width: 60%;
                            font-size: r(30);
                        }
                        >a{
                            display: inline-block;
                            width: 40%;
                            font-size: r(22);
                            color: #494949;
                            box-sizing: border-box;
                            padding: 2px 0 0 50px;
                        }
                    }
                    .detMid{
                        width: 100%;
                        >span{
                            font-size: 11px;
                            color: #494949;
                        }
                    }
                    .detBot{
                        width: 100%;
                        >span:nth-of-type(1){
                            display: inline-block;
                            font-size: r(32);
                            color: #ff9344;
                            width: 50%;
                        }
                        >span:nth-of-type(2){
                            display: inline-block;
                            font-size: r(22);
                            color: #494949;
                            width: 50%;
                            box-sizing: border-box;
                            padding: 2px 0 0 62px;
                        }
                    }
                }
            }
        }
    }
}
